<template>
  <el-dialog
    :title="fileData.fileName || title"
    :visible.sync="show"
    :width="width"
    :destroy-on-close="true"
    append-to-body
    :before-close="handleClose">
    <div class="preViewPage">
      <div v-if="fileData.type ==='ppt'">

      </div>
      <div v-else-if="fileData.type === 'practice' || fileData.type === 'word'">
        <vue-office-docx
          :src="fileData.url"
          style="height: 100vh;"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
      </div>
      <div v-else-if="fileData.type ==='pdf'">
        <vue-office-pdf
          :src="fileData.url"
          style="height: 100vh"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
      </div>
      <div v-else-if="fileData.type === 'excel'">
        <vue-office-excel
          :src="fileData.url"
          :options="options"
          style="height: 100vh;"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
      </div>
      <div v-else-if="fileData.type === 'video'">
        <DPlayer :videoUrl="fileData.url" :flag="'151'"/>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
  </span>
  </el-dialog>
</template>

<script>
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";
import DPlayer from "@/components/Video/DPlayer.vue";

export default {
  emits:['closeDialog'],
  components: {
    DPlayer,
    VueOfficeDocx,
    VueOfficePdf,
    VueOfficeExcel
  },
  props: {
    show:{
      type: Boolean,
      default: false
    },
    fileData:{
      type: Object,
      default: () => {
        return {
          fileName: '',
          type: '', //  文件类型
          url:''
        }
      }
    },
    title: {
      type: String,
      default: "标题"
    },
    width:{
      type: String,
      default: '30%'
    }
  },
  data() {
    return {
      ppt:'',
      docx: 'http://static.shanhuxueyuan.com/test6.docx', //设置文档网络地址，可以是相对地址
      pdf: 'http://static.shanhuxueyuan.com/test.pdf',//设置文档地址
      dialogVisible: false,
      options:{
        xls: false,       //预览xlsx文件设为false；预览xls文件设为true
        minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
        minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
        widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
        heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
        beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
        transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
      },
      excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
    };
  },
  methods: {
    renderedHandler() {
      console.log("渲染完成")
    },
    errorHandler() {
      console.log("渲染失败")
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('closeDialog');
          done();
        })
        .catch(_ => {});
    }
  },
  mounted() {

  }
};
</script>

<style scoped lang="scss">
.preViewPage{
  overflow: auto;
}
</style>
